<template>
  <div>
    <!-- <van-nav-bar title="会议管理详情" left-arrow fixed :border="false" @click-left="onClickLeft"></van-nav-bar> -->
    <div class="bg-grey" v-show="loading">
      <!-- <van-cell-group>
        <van-cell title="会议创建：" :value="dinfo.name" title-class="left-title" 
        value-class="right-value" :border="false"/>
        <van-cell title="申请时间：" :value="dinfo.date" title-class="left-title" 
        value-class="right-value" :border="false"/>
        <van-cell title="会议室：" :value="dinfo.room" title-class="left-title" 
        value-class="right-value" :border="false"/>
        <van-cell title="会议主题：" :value="dinfo.title" title-class="left-title" 
        value-class="right-value" :border="false"/>
        <van-cell title="开始时间：" :value="dinfo.startdate" title-class="left-title" 
        value-class="right-value" :border="false"/>
        <van-cell title="结束时间：" :value="dinfo.enddate" title-class="left-title" 
        value-class="right-value" :border="false"/>
        <van-cell title="出席人员："
         title-class="left-title" value-class="right-value" :border="false"
         :value="dinfo.attendance"/>
        
        <van-cell title="审批状态：" :value="dinfo.type==1?'待批':dinfo.type==2?'已批':'拒绝'" title-class="left-title" 
        value-class="right-value" :border="false"/>
        <van-cell title="审批时间：" :value="!dinfo.approvaltime?'--':dinfo.approvaltime" title-class="left-title" value-class="right-value" :border="false"/>
      </van-cell-group> -->
      <div class="title-panel">
        <p class="flex-info">
          <span class="title-info">{{dinfo.name}}-{{dinfo.title}}</span>
          <span :class="dinfo.type == '1'?'default-class': dinfo.type == '2'?'agree-class':dinfo.type=='3'?'defined-class':'cancel-class'">{{dinfo.type=='1'?'未审批':dinfo.type=='2'?'已审批':dinfo.type=='3'?'已拒绝':'已取消'}}</span>
        </p>
        <p class="desc-info">{{dinfo.date}}</p>
      </div>
      <van-cell-group>
        <van-cell :border="false" v-if="dinfo.title">
          <template slot="title">
            <img class="icon-img" src="../../assets/meeting/icon1.png">
            <span>{{dinfo.title}}</span>
          </template>
        </van-cell>
         <van-cell :border="false" v-if="dinfo.room">
          <template slot="title">
            <img class="icon-img" src="../../assets/meeting/icon2.png">
            <span>{{dinfo.room}}</span>
          </template>
        </van-cell>
         <van-cell :border="false" v-if="dinfo.startdate">
          <template slot="title">
            <img class="icon-img" src="../../assets/meeting/icon3.png">
            <span>{{dinfo.startdate.split(" ")[0] + ' '}} {{dinfo.startdate.split(" ")[1]}} - {{dinfo.enddate.split(" ")[1]}}</span>
          </template>
        </van-cell>
         <van-cell :border="false" v-if="dinfo.attendance">
          <template slot="title">
            <img class="icon-img" src="../../assets/meeting/icon4.png">
            <span>{{dinfo.attendance}}</span>
          </template>
        </van-cell>
      </van-cell-group>
      <div class="bottom-btn" v-if="dinfo.type == 1">
        <van-row type="flex" justify="space-around">
          <van-col span="11"><van-button class="fill-width default-btn-class" @click="defined">拒 绝</van-button></van-col>
          <van-col span="11"><van-button class="fill-width" color="#2E79FF" @click="agreed">同 意</van-button></van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default{
    data(){
      return{
        loading: false,
        dinfo:{
          title:"",
          subject:"",
          content:"",
          appperson:'',
          name:'',
          date:'',
          attendance:'',//参会人员
          room:"",//会议室
          startdate:'',
          enddate:'',
          type:'',//1,待批；2，己批;3,拒绝
          approvaltime:'',
          content:''
        }
      }
    },
    activated() {
      this.loading = false
      this.$toast({
        duration: 0,
        forbidClick: true,
        className: 'loading-toast',
        icon: require('../../assets/loading.gif'),
      })
      this.dinfo = {
          title:"",
          subject:"",
          content:"",
          appperson:'',
          name:'',
          date:'',
          attendance:'',//参会人员
          room:"",//会议室
          startdate:'',
          enddate:'',
          type:'',//1,待批；2，己批;3,拒绝
          approvaltime:'',
          content:''
        }
      this.$bridge.callHandler('navTitle', {title: '会议审批详情'})
      if(this.$route.query.from && this.$route.query.from == 'origin') {
        this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
          // console.log('done')
          responseCallback('h5 done!')
        })
      } else {
        this.$bridge.callHandler('navBack')
        this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
          this.$router.go(-1)
          // console.log('go(-1)')
          responseCallback('go(-1)')
        })
      }
      this.$route.query.id
      this.showList()
    },
    methods:{
      /**
       * 返回键
       * @return {[type]} [description]
       */
      onClickLeft() {
        this.$router.go(-1)
      },
      /**
       * 返回方法
       * @return {[type]} [description]
       */
      backMethod() {
        if(this.$route.query.from && this.$route.query.from == 'origin') {
          this.$bridge.callHandler('close')
        } else {
          this.$router.go(-1)
        }
      },
      /**
       * 显示详情数据
       * @return {[type]} [description]
       */
      showList() {
        let config = {
          method: 'post',
          url: `${this.$common.basePath}meeting.php`,
          data: {
            do: 'meetingedit',
            id: this.$route.query.id,
            user_id: this.$store.state.userId
          }
        }
        this.$axios(config).then(res => {
          let obj = this.$common.deepCopy(res.data)
          this.dinfo.name = obj.appperson.name
          this.dinfo.title = obj.title
          this.dinfo.type = obj.type
          this.dinfo.date = obj.date
          this.dinfo.content = obj.content
          this.dinfo.startdate = obj.startdate
          this.dinfo.enddate = obj.enddate
          this.dinfo.room =  obj.conferenceroom.oname
          let a = obj.attendance
          for (var i = 0; i < a.length; i++) {
             if (i==a.length-1){
                  this.dinfo.attendance += a[i].name;
              }else {
                  this.dinfo.attendance += a[i].name + "/ ";
              }
          }
          this.dinfo.approvaltime = obj.approvaltime
          this.dinfo.content = obj.content

          this.$nextTick(_ => {
            this.$toast.clear()
            this.loading = true
          })
        }).catch(err => {
          console.log(err)
        })
      },
      /**
       * 拒绝
       * @return {[type]} [description]
       */
      defined() {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '确认拒绝该会议吗？'
        }).then(() => {
          this.$bridge.callHandler('cancelNavKeepView')
          this.$toast({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          let config = {
            method: "post",
            url: `${this.$common.basePath}meeting.php`,
            data: {
              do: "Approval",
              type: 2,
              oid: this.$route.query.id
            }
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.$toast({
              type: 'success',
              message:'你已成功拒绝本次会议',
              forbidClick: true
            })
            setTimeout(_ => {
              this.backMethod()
              // 原生刷新页面
              this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
            },2500)
          }).catch(err => {
            this.$toast.clear()
          })
        }).catch(() => {
          // on cancel
          this.$bridge.callHandler('cancelNavKeepView')
        });
      },
      /**
       * 同意
       * @return {[type]} [description]
       */
      agreed() {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '确认同意审批该会议吗？'
        }).then(() => {
          this.$bridge.callHandler('cancelNavKeepView')
          this.$toast({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          let config = {
            method: "post",
            url: `${this.$common.basePath}meeting.php`,
            data: {
              do: "Approval",
              type: 1,
              oid: this.$route.query.id
            }
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.$toast({
              type:'success',
              message:'你已确认审批本次会议',
              forbidClick: true
            })
            setTimeout(_ => {
              this.backMethod()
              // 原生刷新页面
              this.$bridge.callHandler('reloadView', {date: parseInt(new Date().getTime())})
            },2500)
          }).catch(err => {
            this.$toast.clear()
          })
        }).catch(() => {
          // on cancel
          this.$bridge.callHandler('cancelNavKeepView')
        });
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .title-panel {
    background-color: #fff;
    padding: 15px;
    width: calc(100vw - 30px);
    margin-bottom: 12px;
  }
  .flex-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    margin: 0;
  }
  .title-info {
    color: #333333;
    font-weight: bold;
    font-size: 17px;
    width: calc(100vw - 100px);
    text-align: left;
  }
  .default-class {
    color: #2E79FF;
    font-size: 14px;
  }
  .agree-class {
    color: #01BF65;
    font-size: 14px;
  }
  .defined-class {
    color: #F54B03;
    font-size: 14px;
  }
  .cancel-class {
    color: #F5A703;
    font-size: 14px;
  }
  .desc-class {
    color: #666666;
    font-size: 14px;
  }
  .desc-info {
    color: #999999;
    font-size: 14px;
    margin: 10px 0 0 0;
  }
  .van-cell__title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    span {
      font-size: 17px;
      color: #333333
    }
  }
  .icon-img {
    width: 16px;
    height: 16px;
    margin-right: 10px;
  }
  .van-cell {
    padding: 5px 15px;
  }

  .bottom-btn {
    position: fixed;
    bottom: 0;
    padding: 3px 10px;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    width: calc(100vw - 20px);
  }
  .default-btn-class{
    border: none;
    color: #2E79FF;
    font-size: 17px;
  }
  .fill-width{
    width: 100%!important;
    font-size: 17px;
  }
</style>